<template>
	<view class="container">		
		<view class="header">
			<diy-nav :title="_title" :bgColor="statusBgColor" :bgColor2="statusBgColor" :backColor="backColor"></diy-nav>
		</view>
		<view >
			<map class="mapV" show-location="true" :polyline="_polyline" @labeltap="clickMarker"  :latitude="myPos.latitude" :longitude="myPos.longitude"  :scale=scale :markers="markers">
			</map>
		</view>
		<view v-if="show_box" class="bottom_box">
			
			<view style="display: flex; margin: 20rpx 30rpx; align-items: center;">
				<view style="font-size: 32rpx; font-weight: 600">{{info.name}}</view>
				<view class="sug">{{tag_str}}</view>
			</view>
			<view style="font-size: 28rpx;margin: 20rpx 30rpx;display: flex;align-items: center;">
				<view @click="toLocation()">
					{{info.address}}
					<text  class="cell-icon yticon icon-you"></text>
				</view>
			
			<view style="border-radius: 10rpx; display: flex; background: #E7E6E6; width: 48rpx; height: 48rpx; margin-left: 30rpx;">
				<text @click="openDial()" class="cell-icon yticon icon-phone"></text>
				</view>
			</view>
			
			
			<view  style="margin-top: 34rpx;margin-bottom: 30rpx;">
				<scroll-view class="scroll-box" scroll-x="true">
						
						<view  class="list_v" @click="clickImg(index)" v-for="(item, index) in line_pic_arr" :key="index">
							<image class="list_img" :class="{current:current_line_pic_index==index}" mode="aspectFill" :src="item"></image>
						</view>
				</scroll-view>
				
			</view>
		
		</view>
		<view v-if="show_box" class="box_btn">
			<view class="map_btn" @click="viewLine(1)">查看路线</view>
			<view class="map_btn" @click="viewLine(2)">查看教室</view>
			<view class="map_btn" @click="toSchool(info.id,info.name)">查看课程</view>
			
		</view>
		<view v-if="show_img" style="display: flex;width: 100%;height: 1000rpx;position: absolute;top: 198rpx;align-items: center;justify-content: center;">
			<view style="width: 100%;">
				<text v-if="show_left_icon" class="cell-icon yticon icon-zuo left-icon" @click="preImg()"></text>
					<view style="margin: 20rpx;position: relative;">
						<image style="height:100%;border-radius: 40rpx;width:100%;max-height: 1000rpx;" mode="widthFix"  :src="line_pic_arr[current_line_pic_index]"></image>
						<!-- <view class="close_circle close"  @click="closeImage()"></view> -->
						<text class="cell-icon yticon icon-close close_circle" @click="closeImage()"></text>
					</view>
					
				
				<text v-if="show_right_icon" class="cell-icon yticon icon-you right-icon" @click="nextImg()"></text>
			</view>
			
		</view>
		
	<!-- 	<view v-if="show_img" style="display: flex;width: 100%;height: 1000rpx;position: absolute;top: 198rpx;align-items: center;justify-content: center;">
			<view style="width: 100%;height: 100%;display: flex;">
				<text v-if="show_left_icon" class="cell-icon yticon icon-zuo left-icon" @click="preImg()"></text>
					<view style="width: 100%;height: 100%;display: flex;align-items: center;margin: 20rpx;">
						<image style="height:100%;border-radius: 40rpx;width:100%;max-height: 1000rpx;" mode="widthFix"  :src="line_pic_arr[current_line_pic_index]"></image>
						<view class="close_circle close" :style="{top:closeHeight+'rpx'}" @click="closeImage()"></view>
					</view>
					
				
				<text v-if="show_right_icon" class="cell-icon yticon icon-you right-icon" @click="nextImg()"></text>
			</view>
			
		</view> -->
		
		<uni-popup ref="popup"  background-color="#fff">
			<view class="popup-content">
				<view @click="makePhone()" class="pop-child" style="margin-bottom: 10rpx;">呼叫 {{info.contact}}</view>
				<view @click="cancelPop()" class="pop-child">取消</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'  
	import Api from '@/common/api';
	import DiyNav from "@/components/diy-nav-back"
	export default {
		components: {
			DiyNav
		},
		data() {
			return {
					_title:'',
					statusBgColor:'transparent',
					backColor:'#000000',
					tag_str:'查看路线',
					scale:9,
					
					// 我的定位经纬度信息
					myPos: {
						latitude: '29.486604830668778',
						longitude: '106.45813652314246',
					},
					
					markers: [],
					show_box:true,
				
					course_list:[],
					show_img:false,
					line_pic_arr:[],
					current_line_pic_index:0,
					campus_id:0,
					show_right_icon:true,
					show_left_icon:false,
					_polyline:[],
					info:{},
					closeHeight:0
				}
		},
		
		onLoad(option) {	
			
			this.campus_id =option.id;
			// this.campus_id =12345;
			this.campusMarkerList()
			this.campusCourseList()
		},
		
		beforeCreate(){
			
		},
		beforeDestroy(){
			
			
		},
		computed: {
			...mapState(['hasLogin','userInfo','user_role']),
			
		},
		onShow(){
			
		},
		onReady(){
			
		},
		
		methods: {
			toSchool(id,name){
				uni.navigateTo({
					url:'/pages/course/school?id='+id+'&name='+name
				})
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.info.contact
				})
			},
			openDial(){
				this.$refs.popup.open('bottom')
			},
			cancelPop(){
				this.$refs.popup.close();
			},
			toLocation(){
				
				let that =this;
				uni.openLocation({
					latitude:that.info.latitude*1,
					longitude:that.info.longitude*1,
					name:that.info.address,
					scale:16
				})
			},
			previewImage(index=0) {
				var current = this.line_pic_arr[index]
				let that = this
				uni.previewImage({
					showmenu:false,
					current: current,
					indicator:"default",
					urls: this.line_pic_arr,
				})
			},			
			toCourse(id){
				uni.navigateTo({
					url:'/pages/course/detail?id='+id
				})
			},
			
			
			async campusMarkerList(){
				
				let params ={lat:this.myPos.latitude,lng:this.myPos.longitude,campus_id:this.campus_id}
				let data = await Api.apiCall('get',Api.apiName.campus_marker_list,params);
				if(!data){
					return;
				}
				this.markers=data.data;
			},
			
			clickMarker(e){
				let _campus_id = e.detail.markerId.toString();
				this.campus_id = _campus_id.substring(4);
				this.campusCourseList();
				
				this.tag_str='查看路线'
			},
			
			async campusCourseList(){

				let params ={campus_id:this.campus_id};
				let data = await Api.apiCall('get',Api.apiName.campus_course_list,params,true);
				if(!data){
					this.show_box=false;
					return;
				}
				this.myPos.latitude=data.data.campus_info.latitude;
				this.myPos.longitude=data.data.campus_info.longitude;
				this.scale=17;
				this.show_box=true;
				// this.course_list=data.data.list;
				this.info = data.data.campus_info;
				this._title = data.data.campus_info.name;
				this.line_pic_arr=data.data.campus_info.line_pics;
				// this.show_img=true;
			},
			closeImage(){
				this.show_img=false;
				this.tag_str ='查看路线'
			},
			async viewLine(type=1){
				if(!this.info.line_pics && type==1){
					this.$api.msg(`暂无导航图片`)
					return;
				}
				if(!this.info.room_pics && type==2){
					this.$api.msg(`暂无教室图片`)
					return;
				}
				
				
				// this.show_img=true;
				this.current_line_pic_index=0;
				
				if(type==1){
					this.line_pic_arr = this.info.line_pics;
					this.tag_str = '查看路线'
				}else{
					this.line_pic_arr = this.info.room_pics;
					this.tag_str='查看教室'
				}
				// this.previewImage();
				// this.show_right_icon=true;
				// this.show_left_icon=false;
			},
			nextImg(){
				
				this.show_left_icon=false;
				this.show_right_icon=false;
				let len = this.line_pic_arr.length;				
				if(this.current_line_pic_index<len-1){
					this.current_line_pic_index++;
				}
				if(this.current_line_pic_index<len-1){
					this.show_right_icon=true;	
				}
				if(this.current_line_pic_index>0){
					this.show_left_icon=true;
				}				
				return;
			},
			preImg(){
				this.show_left_icon=false;
				this.show_right_icon=false;
				let len = this.line_pic_arr.length;
				if(this.current_line_pic_index>0){
					this.current_line_pic_index--;
				}
				if(this.current_line_pic_index>0){
					this.show_left_icon=true;
				}
				if(this.current_line_pic_index<len-1){
					this.show_right_icon=true;
				}
			},
			clickImg(index){
				let len = this.line_pic_arr.length;
				this.current_line_pic_index =index;
				this.show_img=true;
				// this.previewImage(this.current_line_pic_index)
				// return;
				if(index==0){
					this.show_left_icon=false;
					if(len>1){
						this.show_right_icon=true;
					}
				}
				if(index==len-1){
					this.show_right_icon=false;
					if(len>1){
						this.show_left_icon=true;
					}
				}
			},
			
		},
	

	}
</script>

<style lang="scss">	

	page {
		// background: #000;
		
	}
	.container{
		height:100vh;
		display: flex;
		overflow-y: hidden;
	}
	.header{
		position: absolute;
		z-index: 1;
	}
		
	.mapV {
		width: calc(100vw);
		height: 100vh;    
	}
	.bottom_box{
		height: 382rpx;
		// border:1px solid red;
		z-index:22;
		width: 100%;
		bottom: 0rpx;
		position: fixed;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.course_v{
		width: 160rpx;
		height: 202rpx;
		margin-left: 20rpx;
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column-reverse;
		align-items: center;
		// background-color: red;
		// border: 1px solid red;
		color: white;
		font-size: 12px;
}
	.course_img{
		width: 160rpx;
		height: 202rpx;
		border-radius: 24rpx;
		display: table;
	}
	.list_v{
			width: 160rpx;
			height: 202rpx;
			margin-left: 20rpx;
			display: inline-flex;
			/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
			flex-direction: column-reverse;
			align-items: center;
			// background-color: red;
			// border: 1px solid red;
			color: white;
			font-size: 12px;
	}
	.list_img{
		width: 160rpx;
		height: 202rpx;
		border-radius: 24rpx;
		display: table;
		&.current{
			border: 4rpx solid #4CADDB;
		}
	}
	.scroll-box{
		white-space: nowrap
	}
	.box_btn{
		
		height: 218rpx;
		width: 280rpx;
		position: absolute;
	    top: 60%;
	    left:50%;
	    transform: translate(-50%,-50%);
	}
	.map_btn{
		width: 100px;
		height: 50rpx;
		background-color: #90bbda;
		position: relative;
		left: 50%;
		top: 30rpx;
		-webkit-transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 10rpx;
		margin-top: 14rpx;
		font-size: 12px;
		font-weight: 800;
		line-height: 50rpx;
		color: #fff;
	}
	.privacy{
		width: 500rpx;
		height: 670rpx;
		// border: 1px solid red;
		margin: auto;
		position: absolute;
		top: 194rpx;
		left: 0rpx;
		right: 0rpx;
		
		z-index: 1;
	}
	
	.privacy-content{
		height: 100%;
		width:100%;
	}
	.close_circle{
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		margin: auto;
		height: 60rpx;
		width: 60rpx;
		// border: 1px solid #FFFFFF;
		color:#FFFFFF;
		text-align: center;
		border-radius: 50%;
		z-index:1;
		font-size: 14px;
		line-height: 54rpx;
		// background: rgba(0,0, 0, 0.6);
	}
	.close::before{
		content: "\2716";
	}
	.left-icon{
		position: absolute;
		z-index: 1;
		top: 48%;
		left: 50rpx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color:#FFFFFF
	}
	.right-icon{
		position: absolute;
		top: 48%;
		right: 50rpx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
	}
	.player_btn{
		position: absolute;
		z-index: 2;
		top: 72rpx;
	}
	.bottom-btn{
		height: 30rpx;
		
		width: 150rpx;
		position: absolute;
		// bottom: 600rpx;
		left: 20rpx;
		right: 20rpx;
		margin: auto;
		
	}
	.bottom-list{
		// height: 600rpx;
		// border: 1px solid red;
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #FFFFFF
	}
	.campus-total{
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		margin-top: 20rpx;
		margin-left: 40rpx;
		font-size: 24rpx;
		font-weight: 600;
	}
	.bottom-campus-list{
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
		margin-top: 40rpx;
	}
	.enroll-info{
		display: flex;
		margin-top: 20rpx;
	}
	.enroll-child{
		background: #EEEEEE;
		padding: 0rpx 20rpx;
		border-radius: 10rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		height: 40rpx;
	}
	.margin-l-20{
		margin-left: 40rpx;
	}
	.sug{
		margin-left: 20rpx; 
		background: rgba(1,145,255,0.2);
		padding: 10rpx 30rpx; 
		border-radius: 20rpx; 
		font-size: 26rpx; 
		font-weight: 600;
		color: #0191FF;
	}
	.select_tag{
		width: 150px;
		height: 66rpx;
		display: flex;
		margin-right: 12rpx;
		border-radius: 20rpx;
	}
	.uni-select{
		width: 160rpx !important;
		height: 66rpx !important;
		border:none !important;
	}
	.uni-select__input-placeholder {
		color:#9e9c9c !important;
	}
	.uni-select__selector{
		top:calc(100%) !important;
	}
	.popup-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color:rgba(153,153,153,0.1);
	}
	.pop-child{
		height: 100rpx;
		background: #FFFFFF;
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>
